<template>
  <div style="width: 100%">
    <div class="article" v-for="(item, i) in articleList.slice(0, 5)" :key="i">
      <div
        class="article_main"
        :class="{
          w70: hasDel || hasEdit,
        }"
      >
        <p class="article-title p-line" @click="goArticle(item.artId)">
          【{{ item.catalogueName }}】{{ item.title }}
        </p>
        <!-- <p class="article-content p-line" v-html="item.content"/> -->
        <el-row class="article-info">
          <el-col :span="12">
            <div class="grid-content icon-all">
              <span class="iconfont icon-all-one">&#xe603;</span>
              <span class="article-info-number">{{ item.hits }}</span>
              <span class="iconfont">&#xec8c;</span>
              <span class="article-info-number">{{ item.likes }}</span>
              <span class="iconfont">&#xe666;</span>
              <span class="article-info-number">{{ item.favorites }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content article-author">{{ item.authorName }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content article-date">{{ item.publishTime }}</div>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="article_right">
        <el-button
          type="success"
          v-if="hasEdit"
          size="small"
          @click="editClick"
          style="margin-right: 10px"
          >编辑</el-button
        >
        <el-popconfirm

          title="确定删除吗？"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm='delClick(item.artId)'

        >
          <el-button slot="reference" type="danger" size="small"
            >删除</el-button
          >
        </el-popconfirm>
      </div> -->
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="page"
      :page-size="pageSize"
      @current-change="handleCurentChange"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { renderTime } from "@/utils/tools.js";
export default {
  name: "articleShow",
  props: ["hasDel", "hasEdit", "articleList", "total", "catalogue", "isChild"],
  // props: {
  //   hasDel: {
  //     type: Boolean,
  //     default: false
  //   },
  //   hasEdit: {
  //     type: Boolean,
  //     default: false
  //   },
  //   articleList:{

  //   }
  // },
  data() {
    return {
      //分页器所在页数
      page: 1,
      //每页有几个
      pageSize: 5,
    };
  },
  methods: {
    delClick(artId) {
      this.$emit("delete", artId);
    },
    editClick() {
      this.$router.push("/writing");
    },
    goArticle(artId) {
      let link = this.$router.resolve({
        path: "/article",
        query: { artId: artId },
      });
      window.open(link.href, "_blank");
    },
    //页码变化时，触发函数
    async handleCurentChange(value) {
      let res;
      if (this.isChild) {
        res = await this.$api.reqCoreGeneralByPage(this.catalogue, value, 5);
      } else {
        res = await this.$api.reqGeneralAllByCatalogue(
          this.catalogue,
          value,
          5
        );
      }
      if (res.code === 200) {
        for (let item of res.rows) {
          item.publishTime = renderTime(item.publishTime);
          item.thumbnail = this.$api.BASEURL + item.thumbnail;
        }
        this.articleList = res.rows;
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple {
  background: #d3dce6;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.article {
  margin-top: 20px;
  margin-left: 10px;
  -moz-box-shadow: 2px 2px 10px #d7d7d7;
  -webkit-box-shadow: 2px 2px 10px #d7d7d7;
  box-shadow: 2px 2px 10px #d7d7d7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .article_main {
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    width: 100%;
  }
  .w70 {
    width: 70%;
  }
  .p-line {
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-title {
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: @themeColor;
    }
  }
  .article-content {
    margin-top: 15px;
    font-size: 16px;
    color: #797979;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .article-info {
    margin-top: 20px;
    .icon-all {
      padding-left: 20px;
      .icon-all-one {
        font-size: 16px;
      }
      .article-info-number {
        font-size: 14px;
        padding-left: 5px;
        margin-right: 20px;
        vertical-align: bottom;
      }
    }
    .article-author {
      text-align: right;
      color: #797979;
      font-size: 14px;
    }
    .article-date {
      padding-right: 10px;
      text-align: right;
      color: #797979;
      font-size: 14px;
    }
  }
}
.article_right {
  display: flex;
  align-items: center;
  padding-right: 20px;
  .el-button {
    padding: 9px 15px;
  }
}
.pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
